<template>
  <div class="table-box">
    <div class="table-title" v-if="tableTitle">{{ tableTitle }}</div>
    <div class="plain-table">
      <el-table :data="tableData" class="custom-table">
        <el-table-column
          :prop="cell.prop"
          :label="cell.label"
          :width="cell.width"
          v-for="cell in tableConfigData"
          :key="cell.prop"
        >
          <!-- 检查费用 -->
          <template #default="scope" v-if="cell.prop === 'checkCost'">
            <el-button link @click="handleCheckCost(scope.row)" class="my-button"
              >查看详情</el-button
            >
          </template>
          <!-- 对接文档查看 -->
          <template #default="scope" v-if="cell.prop === 'viewFile'">
            <a :href="scope.row.viewFile" target="_blank">在线文档</a>
          </template>
          <!-- 停用/恢复 操作 -->
          <template #default="scope" v-if="cell.prop === 'controlUse'">
            <el-button link @click="onClickControlUse(scope.row)" class="my-button">{{
              scope.row.controlUse
            }}</el-button>
          </template>
          <!-- 渠道申请开通 -->
          <template #default="scope" v-if="cell.prop === 'openChannel'">
            <el-button
              link
              @click="onClickControlUse(scope.row)"
              class="my-button"
              v-if="scope.row.statusValue === 0 || scope.row.statusValue === 3"
              >{{getOperateBtnText(scope.row.statusValue)}}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-wrap" v-if="pageInfo.totalPage > 0">
      <div class="page-button prev-page_button" @click="prevPage">上一頁</div>
      <div class="page-info">
        <span class="current-page">{{ pageInfo.currentPage }}</span
        >/<span class="total-page">{{ pageInfo.totalPage }}</span>
      </div>
      <div class="page-button next-page_button" @click="nextPage">下一頁</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  tableData: {
    type: Array,
    required: true,
  },
  tableConfigData: {
    type: Array,
    required: true,
  },
  pageInfo: {
    type: Object,
    default: () => ({
      currentPage: 0,
      totalPage: 0,
    }),
  },
  tableTitle: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["onCheckCost", "controlUse", "prevPage", "nextPage"]);

const handleCheckCost = (row) => {
  emit("onCheckCost", row);
};
const onClickControlUse = (row) => {
  emit("controlUse", row);
};

const prevPage = () => {
  emit("prevPage");
};
const nextPage = () => {
  emit("nextPage");
};

const getOperateBtnText = (statusValue) => {
  switch (statusValue) {
    case 0:
      return "申请開通";
    case 3:
      return "申請恢復";
    default:
      return "";
  }
};
</script>

<style scoped lang="scss">
.my-button {
  color: #3b72ad;
}

.table-title {
  padding: 0 29px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.plain-table {
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0px 4px 10px 0px #0000004c;
  padding: 0 29px 48px 29px;

  :deep(.custom-table) {
    .el-table__inner-wrapper {
      &::before {
        border-bottom: 1px solid #979797;
      }

      .el-table__header-wrapper {
        border-bottom: 2px solid #3d3d3d;

        .el-table__header {
          height: 62px;

          thead {
            font-size: 14px;
            color: #3d3d3d;

            .cell {
              font-weight: 400;
            }
          }
        }
      }

      .el-table__body-wrapper {
        .el-table__body {
          color: #3b72ad;
          font-size: 14px;

          tr {
            height: 49px;

            .cell {
              font-weight: 400;
            }
          }

          td.el-table__cell {
            border-bottom: 1px solid #979797;
          }
        }
      }
    }
  }
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 55px;
  color: #666666;
  column-gap: 55px;

  .page-button {
    width: 82px;
    height: 34px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border: 0.5px solid #cbcbcb;
    line-height: 34px;
    text-align: center;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }

  .page-info {
    .current-page {
      color: #3b72ad;
    }
  }
}
</style>
